<template>
  <div>
    <search-goods ref="searchGoods" @search="search" @add="add" @output="output"></search-goods>
    <div class="pageBox">
      <el-pagination
        background
        layout="total"
        :total="total"
        style="display:inline-block;vertical-align: top;"
      ></el-pagination>
      <!-- <el-button type="success" size="small" icon="el-icon-circle-plus" @click="add">新增</el-button>
      <el-button type="info" size="small" plain icon="el-icon-tickets">导出表格</el-button>-->
    </div>
    <div class="tableBox">
      <el-table
        :cell-style="{padding: '5px 0'}"
        v-loading="loading"
        stripe
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        height="px"
      >
        <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column prop="name" show-overflow-tooltip label="课程名称" width="150"></el-table-column>
        <el-table-column prop="className" label="分组名称"></el-table-column>
        <el-table-column prop="saleType" label="售卖类型" width="80">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.saleType===0">正品</el-tag>
            <el-tag type="success" size="small" v-else-if="scope.row.saleType===1">试用</el-tag>
            <el-tag type="info" size="small" v-else-if="scope.row.saleType===2">拓客</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="200">
          <template slot-scope="scope">
            <template v-for="item in JSON.parse(scope.row.tags)">
              <el-tag size="mini" :key="item.index">{{item}}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="isPost" align="center" label="是否邮寄" width="80">
          <template slot-scope="scope">
            <i class="el-icon-error" v-if="scope.row.isPost"></i>
            <i class="el-icon-success icon" v-else></i>
          </template>
        </el-table-column>
        <el-table-column prop="canRefund" align="center" label="是否退款" width="80">
          <template slot-scope="scope">
            <i class="el-icon-error" v-if="scope.row.canRefund"></i>
            <i class="el-icon-success icon" v-else></i>
          </template>
        </el-table-column>
        <el-table-column align="center" label="绩效发放方式" width="130">
          <template slot-scope="scope">
            <el-tag type="success" size="small" v-if="scope.row.issueImme===0">立即发放</el-tag>
            <el-tag
              type="success"
              size="small"
              v-else-if="scope.row.issueImme===1"
            >购买后{{scope.row.issueDays}}天</el-tag>
            <el-tag
              type="success"
              size="small"
              v-else-if="scope.row.issueImme===2"
            >{{scope.row.issueTime}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" width="85">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.status===0">上架中</el-tag>
            <el-tag type="warning" size="small" v-else>下架中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              icon="el-icon-bottom"
              @click="changeStatus(scope.row.productID, 1)"
              v-if="scope.row.status===0"
            >下架</el-button>
            <el-button
              type="success"
              size="small"
              icon="el-icon-top"
              @click="changeStatus(scope.row.productID, 0)"
              v-else
            >上架</el-button>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="modify(scope.row.productID)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="small"
              icon="el-icon-error"
              @click="del(scope.row.productID)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add-goods ref="addGoods" :form.sync="form" :update.sync="update" @addProduct="addProduct"></add-goods>
  </div>
</template>

<script type="text/ecmascript-6">
import { productList, addProduct, getQrPoster,viewProduct, delProduct, updateProduct, query, setProductStatus } from '@/api'
import { produceJsonFormat } from '@/api/produceJsonFormat'
import AddGoods from '@/components/AddGoods'
import SearchGoods from '@/components/SearchGoods'
import addJson from '@/components/add2.json'

export default {
  name: 'goods-info',
  components: {
    AddGoods,
    SearchGoods
  },
  data() {
    return {
      productID: 0,
      loading: true,
      update: false,
      form: produceJsonFormat,
      total: 0,
      tableData: [],
      loading: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    addProduct(data) {
      data.productID = this.productID
      if (this.update) {
        updateProduct(data).then((res) => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$refs.addGoods.hide()
          this.getData()
        })
      } else {
        addProduct(data).then((res) => {
          this.$message({
            message: '新增成功',
            type: 'success'
          })
          this.$refs.addGoods.hide()
          this.getData()
        })
      }
    },
    del(productId) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProduct({ productId }).then((res) => {
          this.getData()
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    modify(productID) {
      this.productID = productID
      this.update = true

      getQrPoster(productID);
      viewProduct(productID).then(res => {
        let form = res
        form.tags = JSON.parse(res.tags)
        form.priceList.map((item) => {
          item.incomeClassList = JSON.parse(item.incomeClassList)
          item.personalList = JSON.parse(item.personalList)
          item.specList = JSON.parse(item.specList)
        })
        this.form = form
        this.$refs.addGoods.show()
      })
    },
    changeStatus(productID, status) {
      setProductStatus({
        productID, status
      }).then(res => {
        this.$message.success('设置成功')
        this.getData()
      })
    },
    add() {
      this.update = false
      this.form = produceJsonFormat
      this.$refs.addGoods.show()
    },
    output() {
      this.$message.error('导出接口正在调试中')
    },
    search(data) {
      this.loading = true

      query(data).then((res) => {
        this.loading = false
        this.total = res.length
        this.tableData = res
      })
    },
    getData() {
      this.loading = true
      console.log(111)
      productList().then((res) => {
        console.log(res)
        this.loading = false
        this.total = res.length
        this.tableData = res
      }).catch(err => {
        console.log("err:"+err)
        console.log("data:"+err.response.data)
      })
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.el-table--fit 
  height calc(100vh - 235px)
</style>
